ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.titles li.title{
    float: left;
    width: 100px;
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    text-align: center;
}
ul.titles li.title.active{
    border: 1px solid #ccc;
}
ul.titles::after{
    content: '';
    display: block;
    clear: both;

}
ul.contents li.content{
    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
    display: none;

}
ul.contents li.content.active{
    display: block;
}